import React, { FC } from 'react';
import { useEffect, useState } from 'react';
import request from '@/config/request';
import './style.less';
import { setCookie } from '@/config/globalConfig';
import { App } from 'antd';

const Sign_In: FC = () => {
  const { message } = App.useApp();
  const [sign_up, setSign_up] = useState({
    username: '',
    password: '',
  });

  const [sign_in, setSign_in] = useState({
    username: '',
    password: '',
  });

  useEffect(() => {
    const signInBtn = document.getElementById('signIn');
    const signUpBtn = document.getElementById('signUp');

    const container = document.querySelector('.container');

    signInBtn?.addEventListener('click', () => {
      container?.classList.remove('right-panel-active');
    });

    signUpBtn?.addEventListener('click', () => {
      container?.classList.add('right-panel-active');
    });
  }, []);

  const signUp = () => {
    console.log(sign_up);
  };

  const signIn = () => {
    request.post('/loginAccount', sign_in).then((ret: any) => {
      if (ret.code === 0) {
        setCookie('userKey', sign_in.username, 60 * 30);

        location.reload();
      } else {
        message.error(ret.msg);
      }
    });
  };

  return (
    <div id="sing_in">
      <iframe id="rfFrame" name="rfFrame" src="about:blank" style={{ display: 'none' }}></iframe>
      <div className="container ">
        <div className="container__form container--signup">
          <form className="form" id="form1" target="rfFrame" onSubmit={signUp}>
            <h2 className="form__title">注册</h2>
            <input
              type="text"
              placeholder="User"
              className="input"
              required
              value={sign_up.username}
              onChange={(e) => {
                setSign_up((origin) => ({
                  ...origin,
                  username: e.target.value,
                }));
              }}
            />
            <input
              type="password"
              placeholder="Password"
              className="input"
              required
              value={sign_up.password}
              onChange={(e) => {
                setSign_up((origin) => ({
                  ...origin,
                  password: e.target.value,
                }));
              }}
            />
            <button className="btn" disabled>
              注册（暂 不 支 持）
            </button>
          </form>
        </div>

        <div className="container__form container--signin">
          <form className="form" id="form2" onSubmit={signIn} target="rfFrame">
            <h2 className="form__title">登录</h2>
            <input
              type="text"
              placeholder="User"
              className="input"
              required
              value={sign_in.username}
              onChange={(e) => {
                setSign_in((origin) => ({
                  ...origin,
                  username: e.target.value,
                }));
              }}
            />
            <input
              type="password"
              placeholder="Password"
              className="input"
              required
              value={sign_in.password}
              onChange={(e) => {
                setSign_in((origin) => ({
                  ...origin,
                  password: e.target.value,
                }));
              }}
            />

            <button className="btn">登录</button>
          </form>
        </div>

        <div className="container__overlay">
          <div className="overlay">
            <div className="overlay__panel overlay--left">
              <button className="btn" id="signIn">
                登录
              </button>
            </div>
            <div className="overlay__panel overlay--right">
              <button className="btn" id="signUp">
                注册
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Sign_In;
